<template>
  <div>
    <van-nav-bar title="用户列表">
      <template #left>
        <van-icon name="search" size="20" @click="test"/>
      </template>
      <template #right >
        <van-icon name="add-o" size="20" @click="user_add"/>
      </template>
    </van-nav-bar>
    <div id="content">
<van-row v-for=" item in userList" :key="item.id" >
          <van-col span="8">
            <van-image
              width="100%"
              height="100%"
              fit="fill"
              :src="uploads+item.icon"
            />
          </van-col>
          <van-col span="14" offset="2">
            <h4>{{item.name}}</h4>
            <p>用户ID：{{item.id}}</p>
            <p>年龄：{{item.age}}</p>
            <p>身份：{{item.type_name}}</p>
           
          </van-col>
        </van-row>
    </div>
    
    <bottom :active="1"></bottom>
  </div>
</template>

<script>
import '../mock/mock.js'
import { mapState } from "vuex";
import Bottom from "@/components/Bottom.vue";
export default {
  data(){
    return{
      userList:[]
    }
  },
  computed: {
    ...mapState({
      uploads:(state)=>state.uploads
    }),
  },
  created(){
    this.getUserList()
  },
  methods:{
    test(){
       
      var url = '/mock/test';
      this.$http.get(url)
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })
    },
    async getUserList(){
      const {data:res}=await this.$http.get(this.HOST+'user/getuserlist')
      console.log(res)
      res.data.forEach(item => {
        switch(item.type){
          case 1:
            item.type_name="学生"
            break
          case 2:
            item.type_name="老师"
            break
          case 3:
            item.type_name="工人"
            break
        }
      });
      this.userList=res.data
    },
    user_add(){
      this.$router.push('/useradd')
    }
  },
  components: {
    Bottom,
  },
};
</script>

<style lang="scss" scoped>
#content{
  padding-bottom: 50px;
}
>>>.van-row{
  border-bottom: 1px solid aqua;
}
>>>.van-button--normal{
  margin-bottom: 10px;
}
>>>.van-col--8{
  margin-top: 15px;
  height: 140px;
}
</style>